92:I[903690,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo"],"SWRDataProvider"] 94:T1797,[V0_FILE]typescriptreact:file="components/kokonutui/toolbar.tsx" isEdit="true" isQuickEdit="true" "use client" import * as React from "react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import { Filter, Settings, Download, Share2, type LucideIcon, User, Bell, Sun, Edit2, Lock } from "lucide-react" interface ToolbarItem { id: string title: string icon: LucideIcon type?: never } interface ToolbarProps { className?: string activeColor?: string onSearch?: (value: string) => void } const buttonVariants = { initial: { gap: 0, paddingLeft: ".5rem", paddingRight: ".5rem", }, animate: (isSelected: boolean) => ({ gap: isSelected ? ".5rem" : 0, paddingLeft: isSelected ? "1rem" : ".5rem", paddingRight: isSelected ? "1rem" : ".5rem", }), } const spanVariants = { initial: { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: { width: 0, opacity: 0 }, } const notificationVariants = { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: -10 }, exit: { opacity: 0, y: -20 }, } const lineVariants = { initial: { scaleX: 0, x: "-50%" }, animate: { scaleX: 1, x: "0%", transition: { duration: 0.2, ease: "easeOut" }, }, exit: { scaleX: 0, x: "50%", transition: { duration: 0.2, ease: "easeIn" }, }, } const transition = { type: "spring", bounce: 0, duration: 0.4 } export function Toolbar({ className, activeColor = "text-primary", onSearch }: ToolbarProps) { const [selected, setSelected] = React.useState("filter") const [isToggled, setIsToggled] = React.useState(false) const [activeNotification, setActiveNotification] = React.useState(null) const outsideClickRef = React.useRef(null) const toolbarItems: ToolbarItem[] = [ { id: "filter", title: "Filter", icon: Filter }, { id: "settings", title: "Settings", icon: Settings }, { id: "download", title: "Download", icon: Download }, { id: "share", title: "Share", icon: Share2 }, { id: "notifications", title: "Notifications", icon: Bell }, { id: "profile", title: "Profile", icon: User }, { id: "theme", title: "Theme", icon: Sun }, ] const handleItemClick = (itemId: string) => { setSelected(selected === itemId ? null : itemId) setActiveNotification(itemId) setTimeout(() => setActiveNotification(null), 1500) } return (

{activeNotification && (

{toolbarItems.find((item) => item.id === activeNotification)?.title} clicked!

)}

{toolbarItems.map((item) => ( handleItemClick(item.id)} transition={transition} className={cn( "relative flex items-center rounded-none px-3 py-2", "text-sm font-medium transition-colors duration-300", selected === item.id ? "bg-[#1F9CFE] text-white rounded-lg" : "text-muted-foreground hover:bg-muted hover:text-foreground", )} > {selected === item.id && ( {item.title} )} ))} setIsToggled(!isToggled)} className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-xl border border-primary/30 shadow-sm transition-all duration-200 hover:shadow-md hover:bg-primary/90 hover:border-primary/40 active:border-primary/50" > {isToggled ? : } {isToggled ? "On" : "Off"}

) } export default Toolbar 88:["$","$L92",null,{"chatId":"HnZL9QTSHx2","children":["$","$L93",null,{"data":{"@\"active-block\",\"HnZL9QTSHx2\",":{"id":"b_pALkVXikhBX","messageId":"qSRvxCCJO7etDG0ryJfErnb45D0FJec9","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"HnZL9QTSHx2\",":false,"":null},"children":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This